<template>
	<view class="checklist" :class="{popupShow:popupShow}">
		<view class="check-top">
			<uni-easyinput class="top-input" trim="all" v-model="params.name" placeholder="请输入单位名称"
				:inputBorder="false">
				<template #right><text style="margin-right: 24rpx">
						<uni-icons type="search" size="24" color="#a6a6a6" @click="getcheckList"></uni-icons>
					</text></template>
			</uni-easyinput>
			<view class="top-select">
				<view class="area-select" @click="toggle('bottom')">
					<text class="text">{{ areaname }}</text>
					<uni-icons type="down" size="15" color="#a6a6a6" v-if="areaname == '所在位置'"></uni-icons>
					<view class="" @click.stop="cleararea()">
						<uni-icons type="clear" size="24" color="#a6a6a6" v-if="areaname != '所在位置'"></uni-icons>
					</view>
				</view>
				<view class="select-type">
					<uni-data-select v-model="params.typeId" :localdata="unittypeList" @change="change"
						placeholder="单位类型"></uni-data-select>
				</view>
				<uni-data-select v-model="params.levelId" :localdata="unitlevelList" @change="change"
					placeholder="单位级别"></uni-data-select>
				<view class="filter">
					<image src="../../static/images/filter.png" mode="aspectFill" style="width: 30rpx; height: 30rpx"
						@click="toggle('right')">
					</image>
				</view>
			</view>
			<view class="bottom-search">
				<view class="search-item" :class="{ active: activeindex === '' }" @click="handlertab('')">
					全部({{ allData || 0 }})</view>
				<view class="search-item" :class="{ active: activeindex === 1 }" @click="handlertab(1)">
					处置中({{ atDisposal || 0 }})</view>
				<view class="search-item" :class="{ active: activeindex === 2 }" @click="handlertab(2)">
					已检查({{ disposed || 0 }})</view>
				<view class="search-item" :class="{ active: activeindex === 0 }" @click="handlertab(0)">
					无需处置({{ noDisposal || 0 }})</view>
			</view>
			<view class="check-total">
				<view class="total">
					共<text>{{ total }} 条</text>结果
				</view>
				<view class="filter">
					<uni-data-select v-model="params.sortField" :localdata="timelist" @change="change()"
						style="width: 280rpx" placeholder="按创建时间降序"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="check-bottom">
			<view class="check-table">
				<!-- 	<scroll-view show-scrollbar="true" scroll-y="true" :refresher-enabled="false"
					refresher-background="#fafafa" :refresher-triggered="triggered" :refresher-threshold="100"
					@refresherpulling="onPulling" @refresherrefresh="onRefresh"> -->
				<view class="table-item" v-for="(item, index) in checkList" :key="index" @click="handlerdetail(item)">
					<view class="item-title">
						<text class="titletext">{{ item.name }}</text>
						<view :class="'item-tab' + item.checkStatus">
							{{ item.checkStatusName }}
						</view>
					</view>
					<view class="item-content">
						<view class="content-title">
							<view class="htitle">所属地址:</view>
							<text class="content-text">{{ item.registerAddress }}</text>
						</view>
						<view class="content-title">
							<view class="htitle">检查单位:</view>
							<text class="content-text">{{ item.checkName }}</text>
						</view>
						<view class="content-title">
							<view class="htitle">检查时间:</view>
							<text class="content-text">{{ item.checkDate }}</text>
						</view>
					</view>
				</view>
				<!-- </scroll-view> -->
			</view>
		</view>

		<!-- 区域选择弹窗 -->
		<uni-popup ref="popup" background-color="#fff" border-radius="30rpx 30rpx 0 0" @maskClick="closepop">
			<view class="popup-content">
				<view class="popup-content-title">
					<text>请选择所在区域</text>
					<view class="popup-content-close">
						<uni-icons type="closeempty" size="20" color="#a6a6a6" @click="closepop"></uni-icons>
					</view>
				</view>
				<view class="popup-content-content">
					<view class="content-select">
						<view class="select-item" @click="handlerregion(1)">
							<view class="content-step">
								<view class="whiteline"></view>
								<view :class="params.provinceId ? 'dot' : 'undot'"></view>
								<view :class="params.provinceId ? 'line' : 'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{ color: step == 1 ? '#00aff1' : '#a6a6a6' }">{{
                  provinceName
                }}</text><uni-icons type="right" size="20" color="#a6a6a6"></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(2)" v-if="params.provinceId">
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.cityId ? 'dot' : 'undot'"></view>
								<view :class="params.cityId ? 'line' : 'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{ color: step == 2 ? '#00aff1' : '#a6a6a6' }">{{
                  cityName
                }}</text><uni-icons type="right" size="20" color="#a6a6a6"></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(3)" v-if="params.cityId">
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.zoneId ? 'dot' : 'undot'"></view>
								<view :class="params.zoneId ? 'line' : 'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{ color: step == 3 ? '#00aff1' : '#a6a6a6' }">{{
                  zoneName
                }}</text><uni-icons type="right" size="20" color="#a6a6a6"></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(4)" v-if="params.zoneId">
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.streetId ? 'dot' : 'undot'"></view>
								<view class="whiteline"></view>
							</view>
							<view class="content-text">
								<text :style="{ color: step == 4 ? '#00aff1' : '#a6a6a6' }">{{
                  streetName
                }}</text><uni-icons type="right" size="20" color="#a6a6a6"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="area-title">{{ selecttitle }}</view>
				<view class="popup-content-area">
					<view class="area-content">
						<view :class="
                params.provinceId == item.value ||
                params.cityId == item.value ||
                params.zoneId == item.value ||
                params.streetId == item.value
                  ? 'active'
                  : ''
              " class="area-item" v-for="(item, index) in options" :key="index" @click="selectarea(item)">
							<text>{{ item.label }}</text><uni-icons type="checkmarkempty" size="16" :color="
                  params.provinceId == item.value ||
                  params.cityId == item.value ||
                  params.zoneId == item.value ||
                  params.streetId == item.value
                    ? '#00aff1'
                    : '#a6a6a6'
                "></uni-icons>
						</view>
					</view>
				</view>
				<view class="popup-content-button">
					<u-button type="primary" @click="determine">确定</u-button>
				</view>
			</view>
		</uni-popup>

		<!-- 筛选弹窗 -->
		<uni-popup ref="filterpopup" background-color="#fff" border-radius="30rpx  0  0 30rpx"
			@maskClick="filterpopupclose">
			<view class="filterpopup-content">
				<view class="filterpopup-title"> 更多筛选 </view>
				<view class="industry">
					<view class="industry-title"> 所属行业: </view>
					<view class="industry-content">
						<view class="industry-item" v-for="(item, index) in supervisorList" :key="index"
							@click="selectfilter(1, item)" :class="params.industryId == item.dictValue ? 'active' : ''">
							<!-- {{item.dictLabel}} -->
							<up-tooltip :buttons="[item.dictLabel]" :text="item.dictLabel" direction="top"
								:showCopy="false"></up-tooltip>
						</view>
					</view>
				</view>
				<view class="industry">
					<view class="industry-title"> 任务来源: </view>
					<view class="industry-content">
						<view class="industry-item" v-for="(item, index) in sourceList" :key="index"
							@click="selectfilter(2, item)" :class="params.taskSource == item.dictValue ? 'active' : ''">
							<up-tooltip :buttons="[item.dictLabel]" :text="item.dictLabel" direction="top"
								:showCopy="false"></up-tooltip>
						</view>
					</view>
				</view>
				<view class="industry">
					<view class="industry-title"> 检查时间: </view>
					<view class="industry-content">
						<uni-datetime-picker v-model="params.dateRange" type="daterange" rangeSeparator="至" />
					</view>
				</view>
				<view class="filterpopup-button">
					<view class="reset" @click="reset"> 重置 </view>
					<view class="confime" @click="confime"> 确认 </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getchecklist,
		getcheckStatusCount
	} from '@/api/checklist.js'
	import {
		getDictsApi,
		getAreaList
	} from '@/api/dict'
	let popupShow = ref(false)
	let activeindex = ref('')
	let value = ref('')
	let areaname = ref('所在位置')
	let provinceName = ref('请选择省')
	let cityName = ref('请选择市')
	let zoneName = ref('请选择区')
	let streetName = ref('请选择街道 ')
	// 搜索参数
	let params = reactive({
		pageNum: 1,
		pageSize: 20,
		name: '',
		typeId: '',
		levelId: '',
		industryId: '',
		checkStatus: '',
		taskSource: '',
		region: [],
		dateRange: [],
		provinceId: '',
		cityId: '',
		zoneId: '',
		streetId: '',
		sortOrder: 'DESC',
	})
	//下拉筛选框
	const change = (value) => {
		params.pageNum = 1
		getcheckList()
	}
	//切换tab
	const handlertab = (index) => {
		params.pageNum = 1
		activeindex.value = index
		params.checkStatus = index
		getcheckList()
	}
	//弹出区域选择
	let popup = ref(null)
	let filterpopup = ref(null)
	const toggle = (type) => {
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		switch (type) {
			case 'bottom':
				popup.value.open(type)
				popupShow.value = true
				break
			case 'right':
				filterpopup.value.open(type)
				popupShow.value = true
				break
			default:
				break
		}
	}
	//关闭区域选择框
	const closepop = () => {
		popupShow.value = false
		popup.value.close()
	}

	//关闭筛选选择框
	const filterpopupclose = () => {
		popupShow.value = false
		filterpopup.value.close()
	}

	/**
	 * @description: 表格数据接口
	 */
	let loading = ref(true)
	let total = ref(0)
	let checkList = ref([])
	const getcheckList = (flag = true) => {
		loading.value = true
		if (params.dateRange) {
			if (params.dateRange.length > 0) {
				params.startDate = params.dateRange[0]
				params.endDate = params.dateRange[1]
			}
		} else {
			params.dateRange = []
			params.startDate = ''
			params.endDate = ''
		}
		console.log('params', params)
		getchecklist({
				pageNum: params.pageNum,
				pageSize: params.pageSize,
			},
			params
		).then((res) => {
			if (flag) {
				checkList.value = res.rows
				total.value = res.total
				loading.value = false
			} else {
				checkList.value = [...checkList.value, ...res.rows]
			}
			// checkStatusCount();
		})
	}

	//处理详情
	const handlerdetail = (item) => {
		item.pageType = 'check'
		let params = JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/checkdetail/checkdetail?params=${params}`,
		})
	}

	// 自定义下拉刷新控件被下拉
	let triggered = ref(true)
	const onPulling = (e) => {
		console.log(1)
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}

	// 下拉刷新触发
	const onRefresh = () => {
		console.log(2)
		setTimeout(() => {
			triggered.value = false
			// this.getRecord();/* 调用接口 */
			if (params.pageNum * params.pageSize >= total.value) {
				uni.showToast({
					title: '已经到底咯~',
					icon: 'none',
				})
				return
			} else {
				params.pageNum++ // 每触发一次触底事件，页码加1
				getcheckList(false)
			}
			getcheckList()
		}, 2000)
	}

	/**
	 * @description: 状态数据
	 */
	let allData = ref(0)
	let atDisposal = ref(0)
	let disposed = ref(0)
	let noDisposal = ref(0)
	const checkStatusCount = () => {
		let countparams = JSON.parse(JSON.stringify(params))
		// 删除 taskStatus 属性
		delete countparams.checkStatus
		getcheckStatusCount({
				pageNum: params.pageNum,
				pageSize: params.pageSize,
			},
			countparams
		).then((res) => {
			allData.value = res.data.allData
			atDisposal.value = res.data.atDisposal
			disposed.value = res.data.disposed
			noDisposal.value = res.data.noDisposal
		})
	}

	/**
	 * @description: 获取字典
	 */
	// 单位类型下拉
	const unittypeList = ref([])
	// 单位级别下拉
	const unitlevelList = ref([])
	// 所属行业下拉
	const supervisorList = ref([])
	//任务来源下拉
	const sourceList = ref([])
	//时间排序
	const timelist = ref([])
	//区域数据
	const options = ref([])
	async function getDicts() {
		await getDictsApi('institution_type').then((res) => {
			//单位类型下拉
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				unittypeList.value = res.data
			}
		})
		await getDictsApi('institution_industry_type').then((res) => {
			//行业主管下拉
			if (res.code === 200) {
				supervisorList.value = res.data
			}
		})
		await getDictsApi('fkwz_institution_level_type').then((res) => {
			//单位级别下拉
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				unitlevelList.value = res.data
			}
		})
		await getDictsApi('task_source_type').then((res) => {
			//任务来源下拉
			if (res.code === 200) {
				sourceList.value = res.data
			}
		})
		await getDictsApi('task_check_order_time_type').then((res) => {
			//时间排序下拉
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				timelist.value = res.data
			}
		})
		await getAreaList({
			pid: 1,
		}).then((res) => {
			console.log('options.value', options.value)
			options.value = res.data
		})
	}

	//获取区域数据
	const getArea = (pid) => {
		getAreaList({
			pid: pid,
		}).then((res) => {
			console.log('options.value', options.value)
			options.value = res.data
		})
	}

	/**
	 * @description: 联级处理省市区操作
	 * @param {String} type 类型
	 */
	let step = ref(1)
	const handlerregion = (value) => {
		step.value = value
		switch (value) {
			case 1:
				getArea(1)
				selecttitle.value = '请选择省'
				break
			case 2:
				getArea(params.provinceId)
				selecttitle.value = '请选择市'
				break
			case 3:
				getArea(params.cityId)
				selecttitle.value = '请选择区/县'
				break
			case 4:
				getArea(params.zoneId)
				selecttitle.value = '请选择街道'
				break

			default:
				break
		}
	}

	//选择区域
	let selecttitle = ref('选择省')
	const selectarea = (item) => {
		switch (step.value) {
			case 1:
				cityName.value = '请选择市'
				zoneName.value = '请选择区'
				streetName.value = '请选择街道'
				params.cityId = null
				params.zoneId = null
				params.streetId = null
				getArea(item.value)
				params.provinceId = item.value
				step.value = 2
				provinceName.value = item.label
				selecttitle.value = '选择市'
				break
			case 2:
				zoneName.value = '请选择区'
				streetName.value = '请选择街道'
				params.zoneId = null
				params.streetId = null
				getArea(item.value)
				params.cityId = item.value
				step.value = 3
				cityName.value = item.label
				selecttitle.value = '选择区/县'
				break
			case 3:
				streetName.value = '请选择街道'
				params.streetId = null
				getArea(item.value)
				params.zoneId = item.value
				step.value = 4
				zoneName.value = item.label
				selecttitle.value = '选择街道'
				break
			case 4:
				getArea(item.value)
				params.streetId = item.value
				step.value = 5
				streetName.value = item.label
				selecttitle.value = '请点击确定'
				break
			default:
				break
		}
	}

	const determine = () => {

		closepop()
		areaname.value = ''
		areaname.value = [
				params.provinceId && provinceName.value,
				params.cityId && cityName.value,
				params.zoneId && zoneName.value,
				params.streetId && streetName.value,
			]
			.filter(Boolean)
			.join(' ')
		params.pageNum = 1
		getcheckList()
		// if (params.provinceId) {
		// 	areaname.value += provinceName.value
		// 	if (params.cityId) {
		// 		areaname.value += cityName.value
		// 		if (params.zoneId) {
		// 			areaname.value += zoneName.value
		// 			if (params.streetId) {
		// 				areaname.value += streetName.value
		// 			}
		// 		}
		// 	}
		// }
	}

	//清除区域
	const cleararea = () => {
		areaname.value = '所在位置'
		params.provinceId = null
		params.cityId = null
		params.zoneId = null
		params.streetId = null
		provinceName.value = '请选择省'
		cityName.value = '请选择市'
		zoneName.value = '请选择区'
		streetName.value = '请选择街道 '
		step.value = 1
		getArea(1)
		params.pageNum = 1
		getcheckList()
	}

	//筛选数据
	const selectfilter = (type, item) => {
		switch (type) {
			case 1:
				params.industryId = item.dictValue
				console.log(params.industryId)
				break
			case 2:
				params.taskSource = item.dictValue
				break
			default:
				break
		}
	}
	//重置
	const reset = () => {
		params.dateRange = []
		params.startDate = ''
		params.endDate = ''
		params.industryId = ''
		params.taskSource = ''
		popupShow.value = false
		filterpopup.value.close()
		getcheckList()
	}
	//筛选
	const confime = () => {
		popupShow.value = false
		filterpopup.value.close()
		params.pageNum = 1
		getcheckList()
	}

	//触底加载更多
	onReachBottom(() => {
		// 加判断： 页码数 * 每一页获取数据的条数 >= 总条数，如果符合条件说明数据已经全部加载完毕
		console.log(
			'params.pageNum * params.pageSize >= total.value',
			params.pageNum * params.pageSize >= total.value
		)
		if (params.pageNum * params.pageSize >= total.value) {
			uni.showToast({
				title: '已经到底咯~',
				icon: 'none',
			})
			return
		} else {
			params.pageNum++ // 每触发一次触底事件，页码加1
			getcheckList(false)
		}
	})

	onMounted(() => {
		getcheckList()
		checkStatusCount()
		getDicts()
	})
</script>

<style lang="scss" scoped>
	.popupShow {
		overflow: hidden;
		position: fixed;
	}

	.checklist {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.check-top {
			position: fixed;
			top: 0;
			box-sizing: border-box;
			padding: 20rpx 40rpx 0 40rpx;
			background-color: #ffffff;
			z-index: 10;
			width: 100vw;

			.bottom-search {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #333333;

				.search-item {
					padding: 10rpx 16rpx;
					background: #bfd4e8;
					border-radius: 12rpx;
				}

				.active {
					background: linear-gradient(-90deg, #00c2d3, #00a7ff);
				}
			}

			.check-total {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
			}

			.top-input {
				border: 2rpx solid #70a7fd;
				border-radius: 60rpx;
				margin-bottom: 10rpx;
			}

			.top-select {
				display: flex;
				justify-content: space-between;
				align-items: center;
				:deep(.uni-select) {
					border: unset;
				}

				.area-select {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #7a7a7a;
					// .text {
					// 	margin-right: 80rpx;
					// }
				}

				.select-type {
					flex-shrink: 0;
					width: 30%;

					:deep(.uni-select__selector) {
						width: 400rpx;
					}
				}

				.filter {
					display: flex;
					align-items: center;
					margin-left: 20rpx;
				}
			}

			:deep(.uni-easyinput__content) {
				background-color: transparent !important;
			}
		}

		.check-bottom {
			flex-grow: 0;
			background-color: #fafafa;
			padding: 320rpx 40rpx 0 40rpx;
			// overflow-y: scroll;

			.check-table {
				.table-item {
					padding: 20rpx 30rpx;
					font-size: 24rpx;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					background-color: #ffffff;
					box-shadow: 0px 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);

					.item-title {
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #f5f5f5;
						padding-bottom: 10rpx;

						.titletext {
							font-size: 26rpx;
							font-weight: 700;
						}

						.item-tab0 {
							background-color: #c5defb;
							color: #5e9efd;
							padding: 2rpx 8rpx;
						}

						.item-tab1 {
							background-color: #c5defb;
							color: #5e9efd;
							padding: 2rpx 8rpx;
						}

						.item-tab2 {
							background-color: #c5defb;
							color: #5e9efd;
							padding: 2rpx 8rpx;
						}
					}

					.item-content {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						.content-title {
							display: flex;
							margin-top: 10rpx;

							.htitle {
								width: 120rpx;
								flex-shrink: 0;
							}
						}

						.content-title:nth-child(1) {
							display: flex;
							width: 100%;
							margin-bottom: 10rpx;

							.htitle {
								width: 120rpx;
								flex-shrink: 0;
							}
						}
					}
				}
			}
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			position: relative;
			height: 80vh;
			border-radius: 20rpx;
			padding: 20rpx;

			.popup-content-title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				font-weight: 700;
			}

			.popup-content-close {
				position: absolute;
				top: 50rpx;
				right: 20rpx;
			}

			.popup-content-content {
				margin-top: 20rpx;

				.content-select {
					border-bottom: 1px solid #ececec;
					padding-bottom: 20rpx;

					.select-item {
						display: flex;
						align-items: center;
						width: 100%;

						.content-step {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 60rpx;

							.dot {
								width: 16rpx;
								height: 16rpx;
								background-color: #00aff1;
								border-radius: 50%;
							}

							.undot {
								width: 16rpx;
								height: 16rpx;
								border: 1px solid #00aff1;
								background-color: #ffffff;
								border-radius: 50%;
							}

							.line {
								width: 4rpx;
								height: 30rpx;
								background-color: #00aff1;
							}

							.whiteline {
								width: 4rpx;
								height: 30rpx;
								background-color: #ffffff;
							}
						}

						.content-text {
							display: flex;
							justify-content: space-between;
							flex: auto;
						}
					}
				}
			}

			.area-title {
				padding: 10rpx 20rpx;
				font-weight: 700;
			}

			.popup-content-area {
				flex-grow: 1;
				/* 子元素将扩展以填充父容器的剩余空间 */
				width: 100%;
				overflow-y: scroll;

				.area-content {
					.area-item {
						display: flex;
						justify-content: space-between;
						padding: 10rpx 20rpx;
					}

					.active {
						color: #00a7ff;
					}
				}
			}
		}

		.filterpopup-content {
			width: 70vw;
			padding: 20rpx;

			.filterpopup-title {
				font-weight: 700;
				border-bottom: 1px solid #eaeaea;
				padding-bottom: 14rpx;
			}

			.industry {
				font-size: 24rpx;
				padding: 10rpx 0;

				.industry-title {
					padding: 10rpx 0;
				}

				.industry-content {
					display: flex;
					flex-wrap: wrap;

					.industry-item {
						width: 22%;
						// background: linear-gradient(-90deg, #00C2D3, #00A7FF);
						margin-bottom: 20rpx;
						margin-right: 10rpx;
						background: #bfd5e9;
						border-radius: 30px;
						padding: 10rpx 20rpx;
						text-align: center;

						:deep(.u-tooltip__wrapper__text) {
							display: inline-block;
							width: 100rpx;
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 隐藏超出的内容 */
							text-overflow: ellipsis;
							/* 超出的部分显示为省略号 */
						}

						// :deep(.u-fade-enter-active){
						// 	top: -0rpx !important;
						// }
						// :deep(.u-fade-leave-active){
						// 	top: -170rpx !important;
						// }
					}

					.active {
						background: linear-gradient(-90deg, #00c2d3, #00a7ff);
					}
				}
			}

			.filterpopup-button {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin: 0 40rpx 40rpx 0;

				.reset {
					padding: 10rpx 0;
					text-align: center;
					width: 30%;
					border-radius: 4px;
					border: 1px solid #00abf7;
					color: #00abf9;
				}

				.confime {
					padding: 10rpx 0;
					text-align: center;
					width: 30%;
					background: linear-gradient(-90deg, #00c2d3, #00a7ff);
					border-radius: 4px;
					color: #ffffff;
				}
			}
		}
	}
</style>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.checklist {
		:deep(.uni-select) {
			border: unset;
		}

		:deep(.uni-select__input-box) {
			width: 100%;
		}
	}
</style>